<template>
  <div class="container" :style="{minHeight:screenHeight}">

    <div class="header">
      <div class="userInfo">
        <div class="userIcon">
          <img :src="userIcon">
        </div>
        <div class="userName">
          <p class="nikeName"> {{ userName }} （<span style="font-size: 28rpx;color: #24C682;">{{ signLevel }}</span>） </p>
          <p style="color: #282828;font-size: 24rpx;margin-top: 15rpx;">能量总和：{{ energyNum }}</p>
        </div>
      </div>
      <div class="energyTotal">
        <div class="energyTotal-left">
          <p>本周能量总和</p>
          <span>{{ weekEnergyTotal }}</span>
        </div>
        <div class="energyTotal-right">
          <p>本月能量总和</p>
          <span>{{ monthEnergyTotal }}</span>
        </div>
      </div>
    </div>

    <div class="item-box" v-for="(item,index) in listData" :key="index" @click="fnPageSkip(item.id)">
        <div class="item-box-header">
          <div class="item-box-header-details">
            <div class="item-box-header-icon">
              <img :src="item.avatarUrl">
            </div>
            <div class="item-box-header-userDetails">
              <div style="display: flex;align-items: center">
                <p style="font-size: 28rpx;color: #282828;font-weight: 500;width:50%;display: flex;align-items: center;justify-content: flex-start">
                  <span class="userName">{{ item.userName }}</span>
                  <span>（<span style="font-size: 28rpx;color: #24C682;">{{ item.signLevel }}</span>）</span>
                </p>
                <p style="font-size: 22rpx;color: #999999">{{ item.modifyTime }}</p>
              </div>
              <div>
                <p style="margin-right: 30rpx">
                  总能量：{{ item.signTotalCount }}
                </p>
                <p>本周打卡{{ item.weekSignCount }}次</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item-box-content">
          <div class="item-box-content-title">
            <p>类型：{{ item.type }}</p>
            <p>年龄：{{ item.age }}</p>
            <p>体重：{{ item.weight }}KG</p>
          </div>
          <p class="target">
            目标：{{ item.content }}
          </p>
          <div class="item-box-content-imgs">
            <div class="item-box-content-img" v-for="(myItem,myIndex) in item.fileList" :key="myIndex">
              <img mode="widthFix" :src="myItem.webPath">
            </div>
          </div>
          <div class="item-box-content-options">
            <p class="content-options-collect">
              <img src="../../../static/image/icon-like.png">
              <span class="optionNum">{{ item.goodTimes }}</span>
            </p>
            <p class="content-options-comment">
              <img src="../../../static/image/icon-comment.png">
              <span class="optionNum">{{ item.commentCount }}</span>
            </p>
          </div>
        </div>
    </div>

    <i-load-more :tip="tip" :loading="lodingShow" />

    <!--签到打卡悬浮窗口-->
      <div :class="isSign == 0 ? 'isSign-suspension-box':'suspension-box'" @click="fnsign">
        <p>签卡</p>
      </div>

    <!--消息提示-->
    <i-message id="message" />
  </div>
</template>

<script>
  const { $Message } = require('../../../static/iview/base/index');
export default {
  data () {
    return {
        userInfo:'',  //用户信息
        userIcon:'',   //用户头像
        userName:'',  //用户姓名
        energyNum:0,  //能量总和
        signLevel:'',  //用户等级
        isSign:0,  //是否签卡，0代表未签，1代表已签
        screenHeight: (Number(wx.getSystemInfoSync().windowHeight) - 49) + 'px',
        weekEnergyTotal:0,
        monthEnergyTotal: 0,
        lodingShow:true,
        pageNum:1,   //列表数据默认请求第一个
        sizeTotal:'',  //列表的所有的页数
        listData:[],   //列表数据
        tip:'数据加载中'
    }
  },

  methods: {
      /*获取首页数据*/
      getDataList(){
        //获取首页个人数据
        this.$httpWX.post({
          url: '/sign/getSelfSign',
          data: {}
        }).then(res => {
          if(res.code == 0){
            this.weekEnergyTotal = res.data.weekSignCount;
            this.monthEnergyTotal = res.data.monthSignCount;
            this.isSign = res.data.isSign;
            this.energyNum = res.data.totalSignCount;
            this.signLevel = res.data.signLevel;
          }
          if(!res){
            $Message({
              content: '数据请求失败',
              type: 'error'
            });
          }
        });
      },

      //获取首页列表数据
      getHomePageList(){
        this.$httpWX.post({
          url: '/sign/getSignList',
          data: {
            pageNum:this.pageNum,
            pageSize:2
          }
        }).then(res => {
          this.lodingShow = false;
          this.tip = '数据加载完成';
          if(res.code == 0){
            this.sizeTotal = res.data.pageinfo.totalPages;
            if(this.pageNum == 1){
                this.listData = [];
                this.listData = res.data.content
            } else {
              res.data.content.forEach((val)=>{
                this.listData.push(val)
              })
            }
          }
        });
      },

      //点击签卡悬浮按钮
      fnsign(){
          if(this.isSign == 0){
            wx.navigateTo({
              url: '../registration/main'
            })
          } else {
            $Message({
              content: '今天已经签过了哟！',
            });
          }
      },

      //点击签到列表，跳转签到详情
      fnPageSkip(id){
        wx.navigateTo({
          url: '../rankingDetails/main?type=homePage&id='+ id
        })
      }
  },
  mounted(){

    /*用户信息*/
     this.userInfo = wx.getStorageSync('userInfo');
    this.userIcon = this.userInfo.url;
    this.userName = this.userInfo.nickname;
    /*设备信息*/
    let phoneInfo = wx.getSystemInfoSync();

    this.pageNum = 1;
    //获取首页个人信息数据
    this.getDataList();
    //获取首页列表数据
    this.getHomePageList();

  },

  //用户下拉刷新事件
  onReachBottom(){
    this.pageNum++;
    this.lodingShow = true;
    this.tip = '数据加载中';
     if(Number(this.pageNum) <= Number(this.sizeTotal)){
       this.getHomePageList();
     } else{
       this.lodingShow = false;
       this.tip = '已经到底啦'
     }
  }
}
</script>

<style>
  .container{
    width: 100%;
    background-color: #F7F7F7;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }
  /*头部信息*/
  .header{
    width: 100%;
    height: 392rpx;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    border-top: 1rpx solid rgba(238,238,238,1);
  }
  /*用户信息*/
  .userInfo{
    width: 90%;
    height: 100rpx;
    margin-left: 42rpx;
    margin-top: 33rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  .userIcon{
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    margin-right: 27rpx;
    overflow: hidden;
  }
  .userName{
    display: inline-block;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .userIcon>img{
    width: 100%;
    height: 100%;
  }
  .nikeName{
    font-size: 28rpx;
    color: #282828;
  }
  .energyTotal{
    width: 95%;
    height: 172rpx;
    margin: 42rpx auto 0 auto;
    background:rgba(36,198,138,1);
    box-shadow:0px 5px 20px 0px rgba(110,128,134,0.5);
    border-radius:20px;
    display: flex;
    align-items: center;
  }
  .energyTotal>div{
    flex: 1;
    height: 70rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .energyTotal>div>p{
    font-size: 24rpx;
    color: white;
  }
  .energyTotal>div>span{
    font-size: 36rpx;
    color: white;
    font-weight: bold;
  }
  .energyTotal-left{
    border-right: 1rpx solid white;
  }

  /*列表数据*/
  .item-box{
    width: 94.67%;
    /*height: 602rpx;*/
    margin: 20rpx auto 20rpx auto;
    padding-bottom: 20rpx;
    background-color: white;
    box-shadow:0px 3px 15px 0px rgba(110,128,134,0.1);
    border-radius:10px;
  }
  .item-box-header{
    width: 93%;
    height: 153rpx;
    margin: 0 auto;
    border-bottom: 1rpx solid rgba(231,231,231,1);
    display: flex;
    align-items: center;
  }
  .item-box-header-details{
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: flex-start;
  }
  .item-box-header-icon{
    width: 96rpx;
    height: 96rpx;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 27rpx;
    background-color: red;
  }
  .item-box-header-icon>img{
    width: 100%;
    height: 100%;
  }
  .item-box-header-userDetails{
    width: 81%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .item-box-header-userDetails>div:nth-of-type(1){
    display: flex;
    justify-content: space-between;
  }
  .item-box-header-userDetails>div:nth-of-type(2){
    display: flex;
    margin-top: 15rpx;
    color: #282828;
    font-size: 24rpx;
  }
  .item-box-content{
    width: 93%;
    margin: 30rpx auto 0 auto;
  }
  .item-box-content-title{
    display: flex;
  }
  .item-box-content-title>p{
    flex: 1;
    color: #999999;
    font-size: 24rpx;
  }
  .item-box-content-title>p:nth-of-type(2){
    text-align: center;
  }
  .item-box-content-title>p:nth-of-type(3){
    text-align: right;
  }
  .target{
    font-size:28rpx;
    font-weight:400;
    color:rgba(40,40,40,1);
    line-height:40rpx;
    margin: 24rpx 0 29rpx 0;
  }
  .item-box-content-imgs{
    display: flex;
    /*justify-content: space-around;*/
  }
  .item-box-content-img{
    width: 212rpx;
    margin-right: 10rpx;
    overflow: hidden;
  }
  .item-box-content-img>img{
    width: 100%;
    /*height: 100%;*/
  }
  .item-box-content-options{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20rpx;
  }
  .content-options-collect,.content-options-comment{
    display: flex;
    align-items: center;
  }
  .content-options-comment{
    margin-left: 50rpx;
  }
  .content-options-collect>img{
    width: 33rpx;
    height: 27rpx;
  }
  .content-options-comment>img{
    width: 30rpx;
    height: 30rpx;
  }
  .optionNum{
    display: inline-block;
    margin-left: 14rpx;
    font-size: 22rpx;
    color: #999999;
  }

  /*悬浮球样式*/
  /*已签卡*/
  .suspension-box{
    width: 90rpx;
    height: 90rpx;
    position: fixed;
    right:36rpx;
    bottom: 20rpx;
    background:rgba(102,102,102,1);
    border-radius:50%;
    font-size: 24rpx;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /*未签卡*/
  .isSign-suspension-box{
    width: 90rpx;
    height: 90rpx;
    position: fixed;
    right:36rpx;
    bottom: 20rpx;
    background:#24C682;
    border-radius:50%;
    font-size: 24rpx;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
